<template>
  <view class="container">
    <tech-nav-bar title="接单" :currentPage="'/pages/technician/order'"></tech-nav-bar>
    
    <!-- 状态切换栏 -->
    <view class="status-tabs">
      <scroll-view scroll-x class="tabs-scroll" show-scrollbar="false">
        <view class="tabs-content">
          <view 
            v-for="(tab, index) in statusTabs" 
            :key="index"
            class="tab-item"
            :class="{ active: currentStatus === tab.value }"
            @tap="switchStatus(tab.value)"
          >
            <text>{{ tab.label }}</text>
            <view v-if="currentStatus === tab.value" class="active-line"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 订单列表 -->
    <scroll-view 
      class="order-list"
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refreshOrders"
    >
      <!-- 空状态提示 -->
      <view v-if="orders.length === 0" class="empty-state">
        <image src="/static/images/empty-icon.png" mode="aspectFit"></image>
        <text class="empty-text" v-if="currentStatus === '6'">暂时还没有可抢订单哦~</text>
        <text class="empty-text" v-else>暂时还没有指派给你的订单哦~</text>
      </view>
      
      <!-- 订单列表 -->
      <view v-else class="order-items">
        <view 
          class="order-item" 
          v-for="(order, index) in orders" 
          :key="index"
          @tap="viewOrderDetail(order)"
        >
          <view class="order-header">
            <text class="order-id">订单号: {{ order.orderNo }}</text>
            <view class="order-status-group">
              <text class="order-type" :class="getOrderTypeClass(order.orderType)">{{ getOrderTypeText(order.orderType) }}</text>
              <text class="order-status" :class="getStatusClass(order.orderStatus)">{{ getStatusText(order.orderStatus) }}</text>
            </view>
          </view>
          <view class="order-info">
            <text class="service-name">{{ order.serviceName || '服务项目' }}</text>
            <text class="additional-services" v-if="order.additionalService">附加项目: {{ order.additionalService }}</text>
            <text class="customer-name" v-if="order.member">客户: {{ order.member.realName ||order.member.nickname  }}</text>
            <text class="customer-name" v-else>客户: 未知名称</text>
            <text class="customer-phone" v-if="order.member">电话: {{ order.member.phone || '未设置' }}</text>
            <text class="customer-phone" v-else>电话: 未知</text>
            <text class="service-date">预约时间: {{ order.appointmentDate+" "+order.appointmentTime }}</text>
            <text class="create-time">下单时间: {{ formatCreateTime(order.createTime) }}</text>
          </view>
          <view class="order-footer">
            <text class="order-amount">¥{{ order.servicePrice || '0.00' }}</text>
            <view class="action-buttons">
              <button 
                class="action-btn" 
                v-if="canAcceptOrder(order.orderStatus,order.paymentStatus)"
                @tap.stop="acceptOrder(order)"
              >
                接单
              </button>
              <button 
                class="action-btn grab-btn" 
                v-if="order.orderStatus === 6"
                @tap.stop="grabOrder(order)"
              >
                抢单
              </button>
              <button 
                class="action-btn" 
                v-if="canStartService(order.orderStatus)"
                @tap.stop="scanQRCode"
              >
                开始服务
              </button>
              <button 
                class="action-btn" 
                v-if="canStartService(order.orderStatus) && isDoorToDoorOrder(order)"
                @tap.stop="navigateToService(order)"
              >
                导航前往
              </button>
              <button 
                class="action-btn" 
                v-if="canCompleteService(order.orderStatus)"
                @tap.stop="completeService(order)"
              >
                完成服务
              </button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 订单详情弹窗 -->
    <view class="order-detail-popup" v-if="showOrderDetailPopup">
      <view class="order-detail-content">
        <view class="order-detail-header">
          <text class="order-detail-title">订单详情</text>
          <text class="order-detail-close" @tap="closeOrderDetail">×</text>
        </view>
        <scroll-view scroll-y="true" class="order-detail-body">
          <view class="detail-item" v-for="(value, key) in currentOrderDetail" :key="key">
            <text class="detail-label">{{formatDetailLabel(key)}}</text>
            <text class="detail-value" :class="getDetailValueClass(key)">{{value}}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import TechNavBar from '@/components/tech-nav-bar.vue'
import jweixin from 'jweixin-module'
export default {
  components: {
    TechNavBar
  },
  data() {
    return {
      statusTabs: [
        { label: '全部', value: '' },
        { label: '待接单', value: '0' },
        // { label: '任务池', value: '6' },
        { label: '待服务', value: '1' },
        { label: '服务中', value: '2' },
        { label: '已完成', value: '3' },
        { label: '已取消', value: '4' },
        { label: '已退款', value: '5' }
      ],
      currentStatus: '',
      orders: [],
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      isRefreshing: false,
      techId: '',
      isJssdkInitialized: false,
      showOrderDetailPopup: false,
      currentOrderDetail: {},
      isIOS: false
    }
  },
  onLoad() {
    // iOS 首次进入自动刷新
    // this.isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    // if (this.isIOS && !sessionStorage.getItem('iosRefreshed_technicianOrder')) {
    //   sessionStorage.setItem('iosRefreshed_technicianOrder', 'true');
    //   window.location.reload();
    //   return;
    // }
    this.getTechId()
    this.loadOrders()
    // 初始化JSSDK
    this.initJssdkConfig()
  },
  onShow() {
  },
  methods: {
    // 初始化JSSDK配置
    initJssdkConfig() {
      // 获取当前页面URL（去除hash部分）
      const url = window.location.href.split('#')[0];
      
      // 请求后端获取签名配置
      uni.request({
        url: `${uni.$config.baseUrl}/wx/jssdk/config`,
        method: 'GET',
        data: { url: url },
        header: {
          'Authorization': uni.getStorageSync('token')
        },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            const config = res.data.data;
            this.configJweixin(config);
          } else {
            uni.showToast({
              title: res.data?.msg || '获取配置失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('获取JSSDK配置失败:', err);
          // uni.showToast({
          //   title: '获取微信配置失败',
          //   icon: 'none'
          // });
        }
      });
    },
    // 配置jweixin
    configJweixin(config) {
      jweixin.config({
        debug: false, // 开启调试模式
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: [
          'updateAppMessageShareData', // 分享给朋友
          'updateTimelineShareData', // 分享到朋友圈
          'showOptionMenu', // 显示右上角菜单
          'hideOptionMenu', // 隐藏右上角菜单
          'onMenuShareAppMessage', // 分享给朋友（旧接口）
          'onMenuShareTimeline', // 分享到朋友圈（旧接口）
          'scanQRCode' // 扫一扫接口
        ] // 必填，需要使用的JS接口列表
      });
      
      // 配置成功回调
      jweixin.ready(() => {
        console.log('jweixin配置成功');
        this.isJssdkInitialized = true;
      });
      
      // 配置失败回调
      jweixin.error((err) => {
        console.error('jweixin配置失败:', err);
        // uni.showToast({
        //   title: '微信配置失败',
        //   icon: 'none'
        // });
      });
    },
    // 获取技师ID
    getTechId() {
      const userInfo = uni.getStorageSync('userInfo')
      this.techId = userInfo ? userInfo.techId || '' : ''
      console.log('技师ID:', this.techId)
    },
    
    // 加载订单列表
    async loadOrders(isRefresh = false) {
      if (!this.techId) {
        console.error('技师ID不存在')
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      
      if (isRefresh) {
        this.pageNum = 1
        this.orders = []
        this.hasMore = true
      }
      
      if (!this.hasMore) return
      
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/orders/orders/listAll`,
          method: 'GET',
          data: {
            technicianId: this.techId,
            orderStatus: this.currentStatus
          }
        })

        uni.hideLoading()
        
        if (res.statusCode === 200 && res.data.code === 200) {
          const { rows, total } = res.data
          
          // 确保rows是数组
          const orderList = Array.isArray(rows) ? rows : []
          this.orders = isRefresh ? orderList : [...this.orders, ...orderList]
          
          this.hasMore = this.orders.length < total
          this.pageNum++
        } else {
          uni.showToast({
            title: res.data.msg || '加载失败',
            icon: 'none'
          })
        }
      } catch (err) {
        uni.hideLoading()
        console.error('加载订单失败:', err)
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        })
      }
    },

    // 切换状态
    switchStatus(status) {
      if (this.currentStatus === status) return
      this.currentStatus = status
      this.loadOrders(true)
    },

    // 加载更多
    loadMore() {
      this.loadOrders()
    },

    // 刷新订单
    async refreshOrders() {
      this.isRefreshing = true
      await this.loadOrders(true)
      this.isRefreshing = false
    },
    
    // 查看订单详情
    viewOrderDetail(order) {
      // 基础订单信息
      const baseDetails = {
        '订单编号': order.orderNo,
        '服务名称': order.serviceName,
        '附加项目': order.additionalService || '无',
        '订单类型': this.getOrderTypeText(order.orderType),
        '预约时间': order.appointmentDate + " " + order.appointmentTime,
        '下单时间': this.formatCreateTime(order.createTime),
        '支付金额': `¥${order.servicePrice || '0.00'}`,
        '订单状态': this.getStatusText(order.orderStatus),
        '支付状态': this.getPaymentStatusText(order.paymentStatus),
        '客户姓名': order.member ? (order.member.realName || order.member.nickname) : '未知',
        '客户电话': order.member ? (order.member.phone || '未设置') : '未知'
      };

      // 根据订单类型添加特定信息
      if (order.orderType === 1) { // 预约到店
        this.currentOrderDetail = {
          ...baseDetails,
          '门店名称': order.storeName || '未指定',
          '技师姓名': order.technicianName || '未指定'
        };
      } else if (order.orderType === 2) { // 上门按摩
        this.currentOrderDetail = {
          ...baseDetails,
          '服务地址': order.addressDetail || '未指定',
          '备注信息': order.remark || '无'
        };
      } else {
        this.currentOrderDetail = baseDetails;
      }
      
      // 显示弹窗
      this.showOrderDetailPopup = true;
    },
    
    // 关闭订单详情弹窗
    closeOrderDetail() {
      this.showOrderDetailPopup = false;
      this.currentOrderDetail = {};
    },
    
    // 格式化详情标签
    formatDetailLabel(key) {
      const labelMap = {
        '订单编号': '订单编号',
        '服务名称': '服务项目',
        '附加项目': '附加项目',
        '订单类型': '服务类型',
        '门店名称': '服务门店',
        '技师姓名': '服务技师',
        '预约时间': '预约时间',
        '下单时间': '下单时间',
        '支付金额': '支付金额',
        '订单状态': '订单状态',
        '支付状态': '支付状态',
        '客户姓名': '客户姓名',
        '客户电话': '客户电话',
        '服务地址': '服务地址',
        '备注信息': '备注信息'
      };
      return labelMap[key] || key;
    },
    
    // 获取详情值样式类
    getDetailValueClass(key) {
      if (key === '支付金额') return 'price';
      if (key === '附加项目') return 'additional';
      if (key === '订单状态') return `status status-${this.currentOrderDetail['订单状态']}`;
      if (key === '支付状态') return `status status-${this.currentOrderDetail['支付状态']}`;
      return '';
    },
    
    // 获取支付状态文本
    getPaymentStatusText(status) {
      const statusMap = {
        0: '未支付',
        1: '已支付',
        2: '已退款'
      };
      return statusMap[status] || '未知状态';
    },
    
    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        '0': '待接单',
				'1': '待服务',
				'2': '服务中',
				'3': '已完成',
				'4': '已取消',
				'5': '已退款',
				'6': '任务池'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 获取订单状态类名
    getStatusClass(status) {
      const classMap = {
        '0': 'status-pending',
        '1': 'status-waiting',
        '2': 'status-processing',
        '3': 'status-completed',
        '4': 'status-cancelled',
        '5': 'status-refunded',
        '6': 'status-pool'
      }
      return classMap[status] || ''
    },
    
    // 格式化服务时间
    formatServiceTime(date, time) {
      if (!date) return '未设置'
      
      // 如果时间包含秒，去掉秒部分
      let formattedTime = time
      if (time && time.split(':').length > 2) {
        formattedTime = time.split(':').slice(0, 2).join(':')
      }
      
      return `${date} ${formattedTime || ''}`
    },
    
    // 格式化下单时间
    formatCreateTime(time) {
      if (!time) return '未知';
      
      // 如果是时间戳格式，转换为日期对象
      let date;
      if (typeof time === 'number') {
        date = new Date(time);
      } else {
        // 尝试解析日期字符串
        date = new Date(time);
      }
      
      // 检查是否是有效日期
      if (isNaN(date.getTime())) {
        return time; // 如果转换失败，直接返回原始值
      }
      
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    
    // 是否可以接单
    canAcceptOrder(status,paymentStatus) {
      return status === 0 && paymentStatus === 1// 状态为6可以接单
    },
    
    // 是否可以开始服务
    canStartService(status) {
      return status === 1// 待服务状态可以开始服务
    },
    
    // 是否可以完成服务
    canCompleteService(status) {
      return status === 2 // 服务中状态可以完成服务
    },
    
    // 接单
    acceptOrder(order) {
      uni.showModal({
        title: '确认接单',
        content: '是否确认接这个订单？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await uni.request({
                url: `${uni.$config.baseUrl}/orders/orders`,
                method: 'PUT',
                data: {
                  id: order.id,
                  orderStatus: 1, // 更新状态为服务中
                  technicianId: this.techId
                }
              })
              
              if (result.statusCode === 200 && result.data.code === 200) {
                uni.showToast({
                  title: '接单成功',
                  icon: 'success'
                })
                this.refreshOrders()
              } else {
                uni.showToast({
                  title: result.data.msg || '接单失败',
                  icon: 'none'
                })
              }
            } catch (err) {
              console.error('接单请求失败:', err)
              uni.showToast({
                title: '网络请求失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 开始服务
    startService(order) {
      uni.showModal({
        title: '开始服务',
        content: '是否确认开始服务？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await uni.request({
                url: `${uni.$config.baseUrl}/orders/orders`,
                method: 'PUT',
                data: {
                  id: order.id,
                  orderStatus: 2, // 更新状态为服务中
                  technicianId: this.techId
                }
              })
              
              if (result.statusCode === 200 && result.data.code === 200) {
                uni.showToast({
                  title: '服务已开始',
                  icon: 'success'
                })
                this.refreshOrders()
              } else {
                uni.showToast({
                  title: result.data.msg || '操作失败',
                  icon: 'none'
                })
              }
            } catch (err) {
              console.error('开始服务请求失败:', err)
              uni.showToast({
                title: '网络请求失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 完成服务
    completeService(order) {
      uni.showModal({
        title: '完成服务',
        content: '是否确认已完成服务？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await uni.request({
                url: `${uni.$config.baseUrl}/orders/orders`,
                method: 'PUT',
                data: {
                  id: order.id,
                  orderStatus: 3,
                  technicianId: this.techId
                }
              })
              
              if (result.statusCode === 200 && result.data.code === 200) {
                uni.showToast({
                  title: '服务已完成',
                  icon: 'success'
                })
                this.refreshOrders()
              } else {
                uni.showToast({
                  title: result.data.msg || '操作失败',
                  icon: 'none'
                })
              }
            } catch (err) {
              console.error('完成服务请求失败:', err)
              uni.showToast({
                title: '网络请求失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 抢单
    async grabOrder(order) {
      try {
        uni.showLoading({
          title: '抢单中...'
        })
        
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/orders/orders/grab/${order.id}?technicianId=${this.techId}`,
          method: 'POST',
        })
        
        if (res.statusCode === 200 && res.data.code === 200) {
          uni.showToast({
            title: '抢单成功',
            icon: 'success',
            duration: 2000
          })
          
          // 延迟切换到待服务标签
          setTimeout(() => {
            this.switchStatus('1') // 切换到待服务标签
            this.refreshOrders() // 刷新订单列表
          }, 1000)
        } else {
          uni.showToast({
            title: res.data.msg || '抢单失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('抢单异常:', error)
        uni.showToast({
          title: '抢单失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 扫码验票
    scanQRCode() {
      // 检查JSSDK是否已初始化
      if (this.isJssdkInitialized) {
        // 使用jweixin的扫码接口
        jweixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
          scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            console.log('扫码结果:', res);
            // 处理扫码结果
            if (res.resultStr) {
              // 获取订单信息
              this.getOrderByOrderNo(res.resultStr);
            }
          },
          fail: (err) => {
            console.error('扫码失败:', err);
            uni.showToast({
              title: '扫码失败',
              icon: 'none'
            });
          }
        });
      } else {
        // JSSDK未初始化
        uni.showToast({
          title: '请在微信中打开',
          icon: 'none'
        });
      }
    },
    
    // 根据订单号获取订单信息
    async getOrderByOrderNo(orderNo) {
      try {
        uni.showLoading({
          title: '获取订单信息...'
        });
        
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/orders/orders/getByOrderNo/${orderNo}`,
          method: 'GET',
          data: {
            technicianId: this.techId
          }
        });
        
        uni.hideLoading();
        
        if (res.data.code === 200) {
          const orderInfo = res.data.data;
          // 显示订单信息并询问是否开始服务
          this.showOrderInfoAndConfirm(orderInfo);
        } else {
          uni.showToast({
            title: res.data.msg || '获取订单信息失败',
            icon: 'none'
          });
        }
      } catch (err) {
        uni.hideLoading();
        console.error('获取订单信息失败:', err);
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
      }
    },
    
    // 显示订单信息并确认是否开始服务
    showOrderInfoAndConfirm(orderInfo) {
      // 格式化订单信息
      const orderStatusText = this.getStatusText(orderInfo.orderStatus);
      const appointmentTime = orderInfo.appointmentDate + ' ' + orderInfo.appointmentTime;
      
      // 构建订单信息内容
      const content = `
订单号: ${orderInfo.orderNo}
服务项目: ${orderInfo.serviceName}
预约时间: ${appointmentTime}
订单状态: ${orderStatusText}
客户姓名: ${orderInfo.customerName || '未知'}
      `;
      
      uni.showModal({
        title: '订单信息',
        content: content,
        confirmText: '开始服务',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 用户点击了"开始服务"按钮
            this.startServiceByOrderNo(orderInfo.orderNo);
          }
        }
      });
    },
    
    // 根据订单号开始服务
    startServiceByOrderNo(orderNo) {
      uni.showModal({
        title: '开始服务',
        content: '是否确认开始服务？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await uni.request({
                url: `${uni.$config.baseUrl}/orders/orders`,
                method: 'PUT',
                data: {
                  orderNo: orderNo,
                  orderStatus: 2, // 更新状态为服务中
                  technicianId: this.techId
                }
              });
              
              if (result.statusCode === 200 && result.data.code === 200) {
                uni.showToast({
                  title: '服务已开始',
                  icon: 'success'
                });
                this.refreshOrders();
              } else {
                uni.showToast({
                  title: result.data.msg || '操作失败',
                  icon: 'none'
                });
              }
            } catch (err) {
              console.error('开始服务请求失败:', err);
              uni.showToast({ 
                title: '网络请求失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 判断是否为上门预约订单
    isDoorToDoorOrder(order) {
      return order.orderType === 2 // 2表示上门预约
    },
    
    // 导航前往服务地点
    navigateToService(order) {
      if (!order.addressDetail) {
        uni.showToast({
          title: '地址信息不完整',
          icon: 'none'
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/technician/drive?address=${encodeURIComponent(order.addressDetail)}`
      })
    },
    
    // 获取订单类型文本
    getOrderTypeText(type) {
      const typeMap = {
        '1': '预约到店',
        '2': '上门按摩'
      }
      return typeMap[type] || '未知类型'
    },
    
    // 获取订单类型类名
    getOrderTypeClass(type) {
      const classMap = {
        '1': 'type-store',
        '2': 'type-door'
      }
      return classMap[type] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #F8F8F8;
  padding: 0 0 100rpx;  /* 为顶部标题和底部导航栏留出空间 */

  .status-tabs {
    background: #FFFFFF;
    border-bottom: 2rpx solid #F5F5F5;

    .tabs-scroll {
      white-space: nowrap;
      width: 100%;
    }

    .tabs-content {
      display: inline-flex;
      padding: 0 20rpx;

      .tab-item {
        position: relative;
        padding: 20rpx 30rpx;
        font-size: 32rpx;
        color: #666;

        &.active {
          color: #2B85E4;
          font-weight: 500;

          .active-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background: #2B85E4;
            border-radius: 2rpx;
          }
        }
      }
    }
  }

  .order-list {
    flex: 1;
    height: calc(100vh - 200rpx);
    padding: 20rpx;

    .empty-state {
      padding: 200rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 30rpx;
      }

      .empty-text {
        font-size: 32rpx;
        color: #999;
      }
    }
    
    .order-items {
      .order-item {
        background: #FFFFFF;
        border-radius: 12rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        
        .order-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20rpx;
          
          .order-id {
            font-size: 30rpx;
            color: #666;
          }
          
          .order-status-group {
            display: flex;
            align-items: center;
            gap: 16rpx;
            
            .order-type {
              font-size: 30rpx;
              font-weight: 500;
              padding: 4rpx 12rpx;
              border-radius: 4rpx;
              
              &.type-store {
                color: #2B85E4;
                background: rgba(43, 133, 228, 0.1);
              }
              
              &.type-door {
                color: #FF9500;
                background: rgba(255, 149, 0, 0.1);
              }
            }
            
            .order-status {
              font-size: 30rpx;
              font-weight: 500;
              
              &.status-pending {
                color: #FF9500;
              }
              
              &.status-waiting {
                color: #2B85E4;
              }
              
              &.status-processing {
                color: #5856D6;
              }
              
              &.status-completed {
                color: #4CD964;
              }
              
              &.status-cancelled {
                color: #999;
              }
              
              &.status-refunded {
                color: #FF3B30;
              }
              &.status-pool {
                color: #FF9500;
              }
            }
          }
        }
        
        .order-info {
          padding-bottom: 20rpx;
          border-bottom: 1rpx solid #F5F5F5;
          
          .service-name, .additional-services {
            font-size: 36rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 12rpx;
            display: block;
          }
          
          .additional-services {
            font-size: 32rpx;
            color: #2B87FF;
            font-weight: 500;
          }
          
          .customer-name, .service-date {
            font-size: 32rpx;
            color: #666;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .customer-phone, .create-time {
            font-size: 32rpx;
            color: #666;
            margin-bottom: 8rpx;
            display: block;
          }
        }
        
        .order-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 20rpx;
          
          .order-amount {
            font-size: 36rpx;
            font-weight: 500;
            color: #FF3B30;
          }
          
          .action-buttons {
            display: flex;
            gap: 20rpx;
            
            .action-btn {
              padding: 8rpx 24rpx;
              border-radius: 8rpx;
              font-size: 28rpx;
              background: #007AFF;
              color: #fff;
              border: none;
              margin-left: 16rpx;
            }
          }
        }
      }
    }
  }
}

.grab-btn {
  background: #FF3B30;
}

.scan-btn {
  background: #4CD964;
}

.order-detail-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  
  .order-detail-content {
    background-color: #FFFFFF;
    border-radius: 24rpx;
    width: 650rpx;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    
    .order-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #EEEEEE;
      background: linear-gradient(135deg, #2B87FF, #1A6FE0);
      border-radius: 24rpx 24rpx 0 0;
      
      .order-detail-title {
        font-size: 38rpx;
        font-weight: 600;
        color: #FFFFFF;
      }
      
      .order-detail-close {
        font-size: 46rpx;
        color: rgba(255, 255, 255, 0.8);
        padding: 10rpx;
        
        &:active {
          opacity: 0.7;
        }
      }
    }
    
    .order-detail-body {
      padding: 20rpx 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      &::-webkit-scrollbar {
        width: 6rpx;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3rpx;
      }
      
      &::-webkit-scrollbar-track {
        background: transparent;
      }
      
      .detail-item {
        display: flex;
        padding: 24rpx 0;
        border-bottom: 1rpx solid #F5F5F5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .detail-label {
          width: 180rpx;
          font-size: 32rpx;
          color: #999999;
          font-weight: 400;
        }
        
        .detail-value {
          flex: 1;
          font-size: 32rpx;
          color: #333333;
          font-weight: 500;
          
          &.price {
            color: #E4393C;
            font-weight: 600;
          }
          
          &.additional {
            color: #2B87FF;
            font-weight: 500;
          }
          
          &.status {
            display: inline-block;
            padding: 4rpx 16rpx;
            border-radius: 20rpx;
            font-size: 28rpx;
            
            &.待接单, &.任务池 {
              background: rgba(255, 149, 0, 0.1);
              color: #FF9500;
            }
            
            &.待服务 {
              background: rgba(43, 133, 228, 0.1);
              color: #2B85E4;
            }
            
            &.服务中 {
              background: rgba(88, 86, 214, 0.1);
              color: #5856D6;
            }
            
            &.已完成 {
              background: rgba(76, 217, 100, 0.1);
              color: #4CD964;
            }
            
            &.已取消 {
              background: rgba(153, 153, 153, 0.1);
              color: #999999;
            }
            
            &.已退款 {
              background: rgba(255, 59, 48, 0.1);
              color: #FF3B30;
            }
            
            &.未支付 {
              background: rgba(255, 59, 48, 0.1);
              color: #FF3B30;
            }
            
            &.已支付 {
              background: rgba(76, 217, 100, 0.1);
              color: #4CD964;
            }
          }
        }
      }
    }
  }
}
</style> 